<script>
import { mapGetters } from 'vuex'
export default {
    name: 'proForm',
    props: {
        title: {
            type: String
        },
        formConfig: {
            type: Object
        },
        isCheck: {
            type: Boolean
        }
    },
    components: {
    },
    render () {
        let { form, formItems, showSpread = true } = this.formConfig
        let model = form.model
        this.tabName = this.$route.query.type || 'own'
        /**
         * 显示展开收起配置
         */
        let minSpreadLen = 3
        let spreadSlot = ''
        if (showSpread && typeof showSpread === 'object') {
            minSpreadLen = showSpread.limit || 3
            spreadSlot = showSpread.slot
        }
        return (
            <div class="pro-form" style={{ ...form.style }}>
                {this.title ? <div class="title">
                    <h3>{this.title}</h3>
                </div> : null}
                <el-form ref="proForm" { ...{ props: form } } label-width="80px" class="ruleForm">
                    {
                        formItems.map((formItem, formItemIndex) => {
                            let formItemTag = null
                            if (formItem.hasOwnProperty('show') && !formItem.show) {
                                return formItemTag
                            }
                            if (formItem.slot) {
                                formItemTag = this.$slots[formItem.slot] || this.$parent.$slots[formItem.slot]
                                formItemTag = formItemIndex < minSpreadLen || this.spread || !showSpread || formItem.slot === 'btns' ? formItemTag : null
                            } else {
                                let { innerEl, ...params } = formItem
                                let innerElTag = null
                                let { append = null, prepend = null } = innerEl
                                switch (innerEl.elType) {
                                case 'input':
                                    innerElTag = <el-input clearable
                                        style={innerEl.attr.style}
                                        on-change={this.submitForm}
                                        v-model={model[formItem.prop]}
                                        on-input={value => {
                                            model[formItem.prop] = value
                                            if (formItem.innerEl.attr.pattern) {
                                                model[formItem.prop] = value.replace(formItem.innerEl.attr.pattern, '')
                                            }
                                        }} { ...{ attrs: innerEl.attr, on: innerEl.event } }></el-input>
                                    break
                                case 'select':
                                    innerElTag = (
                                        innerEl.attr.virtual
                                            ? <VirtualSelect
                                                {...{ props: innerEl.attr }}
                                                v-model={model[formItem.prop]}
                                                on-change={(val) => {
                                                    model[formItem.prop] = val
                                                    this.submitForm()
                                                }}
                                                list={innerEl.options} />
                                            : innerEl.hasOwnProperty('remotePagination') ? (
                                                <el-select
                                                    v-model={model[formItem.prop]}
                                                    // on-change={value => { model[formItem.prop] = value }}
                                                    filterable={true}
                                                    collapse-tags
                                                    // clearable
                                                    filterable
                                                    // remote={true}
                                                    // remote-method={(val) => this.remoteMethod(val, formItem)}
                                                    on-change={this.submitForm}
                                                    reserve-keyword={true}
                                                    on-visible-change={(show) => this.initselectPages(formItem, show)}
                                                    filter-method={(key) => formItem.innerEl.attr.props && this.filterSelectData(key, formItem, formItem.innerEl.attr.props['label'])}
                                                    v-select-loadmore={{
                                                        callback: (key, keyWord, labelKey) => { this.getOptionsByPage(formItem, keyWord, labelKey) },
                                                        key: formItem,
                                                        labelKey: (formItem.innerEl.attr.props && formItem.innerEl.attr.props['label']) || 'label' }}
                                                    { ...{ props: innerEl.attr, on: innerEl.event } }>
                                                    { this.filterOptions[formItem.prop] && this.filterOptions[formItem.prop] instanceof Array &&
                                                    this.filterOptions[formItem.prop].map((item, formIndex) => {
                                                        return <el-option
                                                            label={item[(formItem.innerEl.attr.props && formItem.innerEl.attr.props['label']) || 'label']}
                                                            value={item[(formItem.innerEl.attr.props && formItem.innerEl.attr.props['value']) || 'value']}
                                                            key={formIndex}>
                                                        </el-option>
                                                    }) }
                                                    <div id={`${formItem.prop}`}></div>
                                                </el-select>
                                            ) : (
                                                <el-select on-change={this.submitForm} filterable collapse-tags clearable v-model={model[formItem.prop]} on-change={value => { model[formItem.prop] = value }}
                                                    { ...{ props: innerEl.attr, on: innerEl.event } }>
                                                    { formItem.innerEl.options && formItem.innerEl.options.map(item => {
                                                        return <el-option
                                                            label={item[(formItem.innerEl.attr.props && formItem.innerEl.attr.props['label']) || 'label']}
                                                            value={item[(formItem.innerEl.attr.props && formItem.innerEl.attr.props['value']) || 'value']}
                                                            key={item[(formItem.innerEl.attr.props && formItem.innerEl.attr.props['value']) || 'value']}>
                                                        </el-option>
                                                    }) }
                                                </el-select>
                                            )
                                    )
                                    break
                                case 'datePicker':
                                    innerElTag = (
                                        <el-date-picker
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            unlink-panels
                                            clearable
                                            value-format={(innerEl.attr.type.includes('range') && 'yyyy-MM-dd HH:mm:ss') || ''}
                                            default-time={(innerEl.attr.type.includes('range') && ['00:00:00', '23:59:59']) || ''}
                                            picker-options={this.pickerDateOptions}
                                            v-model={model[formItem.prop]} on-input={value => { model[formItem.prop] = value }} { ...{ props: innerEl.attr } }>
                                        </el-date-picker>
                                    )
                                    break
                                case 'cascader':
                                    innerElTag = (
                                        // <el-cascader
                                        //     separator="/"
                                        //     filterable
                                        //     placeholder="选择分类"
                                        //     before-filter={(val) => { this.onFilterCategory(val, formItem) }}
                                        //     options={formItem.innerEl.options}
                                        //     v-model={model[formItem.prop]}
                                        //     on-change={value => { this.handleItemChange(value, formItem) }}
                                        //     change-on-select={true}
                                        //     clearable
                                        //     { ...{ props: innerEl.attr } }
                                        // >
                                        // </el-cascader>
                                        <pro-cascader
                                            config={{
                                                props: {
                                                    value: 'id',
                                                    label: 'categoryName'
                                                },
                                                placeholder: '选择分类',
                                                ...innerEl.attr
                                            }}
                                            v-model={model[formItem.prop]}
                                            on-change={(val) => { model[formItem.prop] = val }}
                                        ></pro-cascader>
                                    )
                                    break
                                case 'button':
                                    if (!innerEl.hasOwnProperty('permission') || (innerEl.hasOwnProperty('permission') && innerEl.permission && this.$permission(innerEl.permission))) {
                                        innerElTag = innerEl.isReset ? <el-button { ...{ on: innerEl.event, props: innerEl.attr } } style={{ ...innerEl.attr.style }} on-click={this.resetForm} disabled={innerEl.isCtrDisable && !this.isChecked}>{ innerEl.text }</el-button>
                                            : <el-button { ...{ on: innerEl.event, props: innerEl.attr } } disabled={(innerEl.isCtrDisable && !this.isChecked) || innerEl.attr.disabled}>{ innerEl.text }</el-button>
                                    }
                                    break
                                case 'radio':
                                    innerElTag = <el-radio { ...{ on: innerEl.event, props: innerEl.attr } } disabled={(innerEl.isCtrDisable && !this.isChecked) || innerEl.attr.disabled}>{ innerEl.text }</el-radio>
                                    break
                                case 'radio-group':
                                    innerElTag = <el-radio-group v-model={model[formItem.prop]} { ...{ on: innerEl.event, props: innerEl.attr } } disabled={(innerEl.isCtrDisable && !this.isChecked) || innerEl.attr.disabled}>
                                        { formItem.innerEl.options && formItem.innerEl.options.map(item => {
                                            return <el-radio
                                                label={item[(formItem.innerEl.attr.props && formItem.innerEl.attr.props['value']) || 'value']}
                                                key={item[(formItem.innerEl.attr.props && formItem.innerEl.attr.props['value']) || 'value']}>
                                                {item[(formItem.innerEl.attr.props && formItem.innerEl.attr.props['label']) || 'label']}
                                            </el-radio>
                                        }) }
                                    </el-radio-group>
                                    break
                                case 'checkbox':
                                    innerElTag = <el-checkbox { ...{ on: innerEl.event, props: innerEl.attr } } disabled={(innerEl.isCtrDisable && !this.isChecked) || innerEl.attr.disabled}>{ innerEl.text }</el-checkbox>
                                    break
                                case 'checkbox-group':
                                    innerElTag = <el-checkbox-group v-model={model[formItem.prop]} { ...{ on: innerEl.event, props: innerEl.attr } } disabled={(innerEl.isCtrDisable && !this.isChecked) || innerEl.attr.disabled}>
                                        { formItem.innerEl.options && formItem.innerEl.options.map(item => {
                                            return <el-checkbox
                                                label={item[(formItem.innerEl.attr.props && formItem.innerEl.attr.props['value']) || 'value']}
                                                key={item[(formItem.innerEl.attr.props && formItem.innerEl.attr.props['value']) || 'value']}>
                                                {item[(formItem.innerEl.attr.props && formItem.innerEl.attr.props['label']) || 'label']}
                                            </el-checkbox>
                                        }) }
                                    </el-checkbox-group>
                                    break
                                case 'html':
                                    let isObj = params.prop && model[params.prop.split('.')[1]] && model[params.prop.split('.')[0]][params.prop.split('.')[1]]
                                    innerElTag = <div { ...{ on: innerEl.event, props: innerEl.attr } } class={innerEl.attr.class} style={innerEl.attr.style}>
                                        { typeof model[params.prop] !== 'boolean' ? model[params.prop] && model[params.prop].description
                                            ? model[params.prop].description : isObj ? model[params.prop.split('.')[0]][params.prop.split('.')[1]] : model[params.prop]
                                            : typeof model[params.prop] === 'boolean' ? model[params.prop] ? '是' : '否' : '' }
                                    </div>
                                    break
                                }
                                formItemTag = ((formItem.hasOwnProperty('tabType') && formItem.tabType.includes(this.tabName)) || !formItem.hasOwnProperty('tabType')) ? (
                                    <el-form-item
                                    { ...{ props: params } }
                                    style={showSpread && { 'display': this.spread || innerEl.elType === 'button' || (innerEl.elType !== 'button' && formItemIndex < minSpreadLen) ? '' : 'none' }}
                                    key={formItemIndex}>
                                        { prepend } { innerElTag } { append }
                                        {
                                            ((spreadSlot && (spreadSlot === formItem.prop)) || (innerEl.isReset && !spreadSlot)) &&
                                            minSpreadLen < formItems.length && showSpread
                                                ? <span class="ml10 spread-btn" on-click={this.toggleSpread}>
                                                    <i class={this.spread ? 'el-icon-arrow-up' : 'el-icon-arrow-down'}></i>
                                                    {this.spread ? '收起' : '展开所有'}筛选条件</span> : null
                                        }
                                    </el-form-item>
                                ) : null
                            }
                            return formItemTag
                        })
                    }
                </el-form>
            </div>
        )
    },
    computed: {
        ...mapGetters('user', [
            'userInfo'
        ])
    },
    watch: {
        isCheck (val) {
            this.isChecked = val
        }
    },
    data () {
        return {
            identifyKey: '',
            optionsCurrentPage: {},
            optionsSearchKey: {},
            selectPages: {
                current: 1,
                pageSize: 50,
                total: 0
            },
            filterOptions: {
                brandList: [],
                ...this.formConfig.form.model
            },
            isChecked: false,
            statusType: this.$parent.statusType,
            isIndeterminate: false,
            pickerDateOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                },
                {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                },
                {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }]
            },
            spread: false
        }
    },
    methods: {
        resetForm () {
            for (let key of Object.keys(this.formConfig.form.model)) {
                if (this.formConfig.form.model[key] instanceof Array) {
                    this.formConfig.form.model[key] = []
                    if (key.includes('supplierAdminIds')) {
                        this.formConfig.form.model[key] = [parseInt(this.userInfo.userId)]
                    }
                } else {
                    this.formConfig.form.model[key] = ''
                    if (key.includes('creatorId')) {
                        this.formConfig.form.model[key] = parseInt(this.userInfo.userId)
                    }
                    if (key.includes('orderType')) {
                        this.formConfig.form.model[key] = 1001
                    }
                }
            }
            this.observeOption()
            this.$emit('reset')
        },
        submitForm () {
            this.$emit('search')
        },
        remoteMethod (val, formItem) {
            this.optionsSearchKey[formItem.prop] = val
            this.optionsCurrentPage[formItem.prop] = 1
            this.getOptions(formItem.innerEl.remotePagination, { categoryName: val, currentPage: 1 }).then(res => {
                if (res.success) {
                    formItem.innerEl.options = (res.result.length && res.result) || []
                }
            })
        },
        observeOption () {
            for (let formItem of this.formConfig.formItems) {
                if (formItem.innerEl &&
                (formItem.innerEl.elType === 'select' ||
                formItem.innerEl.elType === 'cascader') &&
                formItem.innerEl.remotePagination) {
                    if (formItem.innerEl.remotePagination.params &&
                    formItem.innerEl.remotePagination.params.hasOwnProperty('currentPage')) {
                        formItem.innerEl.remotePagination.params.currentPage = 1
                    }
                    this.setOptions(formItem).then((res) => {
                        formItem.innerEl.options = res.result
                        res.result.length > 100 && (this.filterOptions[formItem.prop] = res.result.slice(0, 20))
                        res.result.length <= 100 && (this.filterOptions[formItem.prop] = res.result)
                        if (formItem.innerEl.attr.showAll) {
                            let obj = {}
                            if (formItem.innerEl.attr.props) {
                                obj[formItem.innerEl.attr.props['label']] = '全部'
                                obj[formItem.innerEl.attr.props['value']] = ''
                            } else {
                                obj = {
                                    label: '全部',
                                    value: ''
                                }
                            }
                            this.filterOptions[formItem.prop].unshift(obj)
                        }
                        // 处理分页回选问题 zch-2021-06-11
                        let model = this.formConfig.form.model
                        if (res.result.length > 100 && model[formItem.prop]) {
                            let outerIds = []
                            if (model[formItem.prop] instanceof Array) {
                                let list = this.filterOptions[formItem.prop].map(el => el[formItem.innerEl.attr.props['value'] || 'value'])
                                outerIds = model[formItem.prop].filter(el => !list.includes(el))
                            } else {
                                outerIds = this.filterOptions[formItem.prop].filter(el => model[formItem.prop] !== el.value)
                                outerIds = outerIds.map(el => el.value)
                            }
                            outerIds.length && res.result.map(val => {
                                if (outerIds.includes(val[formItem.innerEl.attr.props['value'] || 'value'])) {
                                    this.filterOptions[formItem.prop].unshift(val)
                                }
                            })
                            this.initselectPages(formItem, false)
                        }
                    })
                }
            }
        },
        setOptions (formItem, params = {}) {
            return new Promise((resolve, reject) => {
                this.optionsCurrentPage[formItem.prop] = 1
                this.getOptions(formItem.innerEl.remotePagination, { ...params }).then(res => {
                    if (res.success && res.result && res.result.length) {
                        res.result = res.result !== null ? (res.result.length && res.result) : res.result.records ? res.result.records : []
                        res.result.map((item, index, array) => {
                            if (item.existChildNodes === true) {
                                this.$set(array[index], 'children', [])
                            }
                        })
                        resolve(res)
                    }
                })
            })
        },
        getOptions (api, params) {
            return this.$api.common.getOptions(api, { ...api.params, ...params })
        },
        // 远程搜索分类
        async onFilterCategory (queryString, formItem) {
            let res = await this.$api.category.searchCategory({ categoryName: queryString })
            if (res && res.success) {
                if (!res.result || res.result === null) {
                    return
                }
                res.result.map(el => {
                    el.categoryName = el.categoryName.split('>').join('/')
                })
                var filterCateList = res.result
                var results = queryString ? filterCateList.filter(_ => _.categoryName.includes(queryString)) : filterCateList
                // 调用 callback 返回建议列表的数据
                let hasQueryStr = results.length
                hasQueryStr && (formItem.innerEl.options = results)
                // if (!hasQueryStr || !queryString) {
                //     formItem.innerEl.options = this.filterData.categoryList
                // }
            }
        },
        handleItemChange (value, formItem) {
            // 异步加载二级数据
            let parentId
            if (value.length === 1) {
                parentId = value[0]
                formItem.innerEl.options.map((item, index, array) => {
                    if (item.id === parentId && item.children && item.children.length === 0) {
                        this.getOptions(formItem.innerEl.remotePagination, { parentId: parentId }).then(res => {
                            this.$set(array[index], 'children', res.result)
                            item.children && item.children.map((innerItem, innerIndex) => {
                                if (innerItem.existChildNodes === true) {
                                    this.$set(item.children[innerIndex], 'children', [])
                                }
                            })
                        })
                    }
                })
            } else if (value.length === 2) {
                // 异步加载三级数据
                parentId = value[1]
                formItem.innerEl.options.map((item, index) => {
                    if (item.children) {
                        item.children.map((innerItem, innerIndex) => {
                            if (
                                innerItem.id === parentId &&
                                innerItem.children && innerItem.children.length === 0
                            ) {
                                this.getOptions(formItem.innerEl.remotePagination, { parentId: parentId }).then(res => {
                                    this.$set(item.children[innerIndex], 'children', res.result)
                                    innerItem.children.map((ele, innerIndexCount) => {
                                        if (ele.existChildNodes === true) {
                                            this.$set(innerItem.children[innerIndexCount], 'children', [])
                                        }
                                    })
                                })
                            }
                        })
                    }
                })
            } else {
                // 异步加载四级数据
                parentId = value[2]
                formItem.innerEl.options.map((item, index) => {
                    if (item.children) {
                        item.children.map((innerItem, innerIndex) => {
                            if (innerItem.children) {
                                innerItem.children.map((innerItem2, innerIndex2) => {
                                    if (
                                        innerItem2.id === parentId &&
                                        innerItem2.children && innerItem2.children.length === 0
                                    ) {
                                        this.getOptions(formItem.innerEl.remotePagination, { parentId: parentId }).then(res => {
                                            this.$set(innerItem.children[innerIndex2], 'children', res.result)
                                        })
                                    }
                                })
                            }
                        })
                    }
                })
            }
        },
        getOptionsByPage (item, keyWord, labelKey) {
            if (item.innerEl.remotePagination.params &&
            item.innerEl.remotePagination.params.hasOwnProperty('currentPage')) {
                let currentPage = item.innerEl.remotePagination.params.currentPage
                currentPage++
                let params = { currentPage }
                if (keyWord) {
                    params[item.innerEl.remotePagination.params['key']] = keyWord
                }
                this.setOptions(item, params).then(res => {
                    item.innerEl.remotePagination.params.currentPage = currentPage
                    item.innerEl.options = [...item.innerEl.options, ...res.result]
                    this.filterOptions[item.prop] = [...this.filterOptions[item.prop], ...res.result]
                })
                return
            }
            let data = JSON.parse(JSON.stringify(item.innerEl.options))
            if (data.length < 20) {
                return data
            }
            if (keyWord) {
                data = data.filter(el => el[labelKey].includes(keyWord))
            }
            this.selectPages.total = data.length
            const { current, pageSize, total } = this.selectPages
            if (pageSize * current > total) {
                return
            }
            this.selectPages.current++
            this.getSelectList(data, item)
        },
        getSelectList (data, item) {
            let pageList = Object.assign([], this.filterOptions[item.prop])
            const { current, pageSize } = this.selectPages
            let list = data.slice((current - 1) * pageSize, pageSize * current)
            // 处理分页回选问题 zch-2021-06-11
            if (this.formConfig.form.model[item.prop] && this.formConfig.form.model[item.prop] instanceof Array) {
                list = list.filter(val => !this.formConfig.form.model[item.prop]
                    .includes(val[item.innerEl.attr.props['value'] || 'value']))
            }
            pageList = [...pageList, ...list]
            // this.$set(this.filterOptions, item.prop, pageList)
            this.filterOptions[item.prop] = pageList
        },
        filterSelectData (keyWord, item, labelKey) {
            let { formItems } = this.formConfig
            for (const formItem of formItems) {
                if (formItem.prop === item.prop) {
                    if (item.innerEl.remotePagination.params &&
                    item.innerEl.remotePagination.params['key']) {
                        let params = { currentPage: 1 }
                        if (keyWord) {
                            params[item.innerEl.remotePagination.params['key']] = keyWord
                        }
                        this.setOptions(item, params).then(res => {
                            item.innerEl.remotePagination.params.currentPage = 1
                            item.innerEl.options = [...item.innerEl.options, ...res.result]
                            this.filterOptions[item.prop] = [...res.result]
                            this.selectPages.total = res.page.totalRow
                        })
                        return
                    }
                    let sourceData = Object.assign([], item.innerEl.options)
                    const { pageSize } = this.selectPages
                    let res = sourceData.filter((el, index) => {
                        return el[labelKey].includes(keyWord)
                    })
                    this.filterOptions[item.prop] = res.slice(0, pageSize)
                    this.selectPages.current = 1
                    if (!keyWord) {
                        this.selectPages.total = sourceData.length
                        this.filterOptions[item.prop] = sourceData.slice(0, pageSize)
                    }
                }
            }
        },
        initselectPages (item, show) {
            if (!show) {
                this.selectPages = {
                    current: 1,
                    pageSize: 20
                }
                let sourceData = Object.assign([], item.innerEl.options)
                this.filterOptions[item.prop] = sourceData.slice(0, this.selectPages.pageSize)
                if (item.innerEl.remotePagination.params &&
                item.innerEl.remotePagination.params.hasOwnProperty('currentPage')) {
                    // item.innerEl.remotePagination.params.currentPage = 1
                    this.filterOptions[item.prop] = sourceData
                }
                if (this.formConfig.form.model[item.prop]) {
                    let val = this.formConfig.form.model[item.prop]
                    if (!val) {
                        return
                    }
                    let prop = item.innerEl.attr.props['value']
                    item.innerEl.options.map(el => {
                        if (val instanceof Array && val.length) {
                            if (val.includes(el[prop]) && !this.filterOptions[item.prop].map(el => el[prop]).includes(el[prop])) {
                                this.filterOptions[item.prop].unshift(el)
                            }
                        } else if (el[prop] === val && !this.filterOptions[item.prop].map(el => el[prop]).includes(val)) {
                            this.filterOptions[item.prop].unshift(el)
                        }
                    })
                }
            }
        },
        turnToPage (route) {
            let { name, params, query, meta } = {}
            if (typeof route === 'string') name = route
            else {
                name = route.name
                params = route.params
                query = route.query
                meta = route.meta
            }
            if (name.indexOf('isTurnByHref_') > -1) {
                let { href } = this.$router.resolve({ name: name.split('_')[1], query: query })
                window.open(href, '_blank')
                return
            }
            this.$router.push({
                name,
                params,
                query,
                meta
            })
        },
        // 导出
        export (identifyKey) {
            this.identifyKey = identifyKey
            this.$nextTick((a) => {
                this.$refs.exportData.start()
            })
        },
        validate (call) {
            this.$refs.proForm.validate((val) => {
                call(val)
            })
        },
        toggleSpread () {
            this.spread = !this.spread
            this.$emit('spread', this.spread)
        }
    },
    created () {
        // for (let item in this.$parent.formConfig.formItems) {
        //     if (this.$parent.formConfig.formItems[item].innerEl.event) {
        //         this.$parent.formConfig.formItems[item].innerEl.event.click = this.$parent.formConfig.formItems[item].innerEl.event.click.bind(this)
        //     }
        // }
    },
    mounted () {
        this.observeOption()
    }
}
</script>
<style lang="less" scoped>
.pro-form {
    width: 100%;
    padding: 30px 32px 20px 32px;
    background-color: @white;
    .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
        width: 300px;
    }
    /deep/ .el-range-editor .el-range-separator, .el-range-separator {
        margin: 0 5px;
    }
    /deep/ .title {
        position: relative;
        margin-bottom: 16px;
        &::before {
            content: "";
            width: 3px;
            height: 12px;
            background-color: #f8711a;
            position: absolute;
            top: 2px;
        }
        h3 {
            font-size: 14px;
            color: #333;
            margin-left: 14px;
        }
    }
    /deep/ .sub-title {
        margin-bottom: 30px;
    }
    & /deep/ .ruleForm {
        .el-form-item {
            margin-right: 20px;
            .el-form-item__content {
                .el-input {
                    width: 178px;
                }
            }
        }
    }
    .table-bottom {
        .check-all {
            left: 10px;
        }
    }
    .spread-btn {
        cursor: pointer;
        i {
            margin: 0 5px;
            font-size: 16px;
        }
        &:hover {
            color: @primary;
            text-decoration: underline;
        }
    }
}

</style>
